<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}自动化测试平台{% endblock %}</title>
    <meta name="description" content="{% block description %}自动化测试平台{% endblock %}">
    {% load static %}
    <link rel="stylesheet" href="{% static 'portal/css/main.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 定义全局CSS变量 -->
    <style>
        :root {
            /* 主色调 - 参考Apifox */
            --primary: #0066FF;
            --primary-light: #3385FF;
            --primary-dark: #0052CC;
            --primary-hover: #1A75FF;
            
            /* 辅助色 */
            --success: #52C41A;
            --warning: #FAAD14;
            --danger: #F5222D;
            --info: #1890FF;
            
            /* 背景色 */
            --background: #F5F7FA;
            --card-bg: #FFFFFF;
            --hover-bg: #F7F9FC;
            
            /* 文字颜色 */
            --text-primary: #1D2129;
            --text-secondary: #4E5969;
            --text-tertiary: #86909C;
            --text-disabled: #C9CDD4;
            
            /* 边框颜色 */
            --border: #E5E6EB;
            --border-light: #F0F2F5;
            --border-dark: #C9CDD4;
            
            /* 阴影 */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            /* 圆角 */
            --radius-sm: 4px;
            --radius-md: 6px;
            --radius-lg: 8px;
            --radius-xl: 12px;
            
            /* 过渡动画 */
            --transition-fast: 0.15s ease;
            --transition-normal: 0.25s ease;
            --transition-slow: 0.35s ease;
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 下拉菜单样式优化 */
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
        }
        
        .dropdown.show .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        /* 确保show类可以覆盖hidden类 */
        .dropdown-menu.show, .dropdown.show .dropdown-menu {
            display: block !important;
        }
        
        /* 菜单项交互优化 */
        .dropdown-item {
            position: relative;
            transition: all var(--transition-fast);
            cursor: pointer;
            text-decoration: none;
        }
        
        .dropdown-item:hover {
            background-color: var(--hover-bg);
            color: var(--primary);
        }
        
        .dropdown-item i {
            transition: color var(--transition-fast);
        }
        
        .dropdown-item:hover i {
            color: var(--primary);
        }
        
        /* 基础重置 */
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: var(--text-primary);
            background-color: var(--background);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* 全局容器 */
        .container {
            width: 100%;
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 16px;
            padding-right: 16px;
        }
        
        /* 全局通知容器 */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            width: 360px;
            max-width: 90vw;
        }
        
        /* 全局加载指示器 */
        .global-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition-normal), visibility var(--transition-normal);
        }
        
        .global-loading.active {
            opacity: 1;
            visibility: visible;
        }
        
        .loading-spinner {
            width: 48px;
            height: 48px;
            border: 3px solid var(--border-light);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        .loading-text {
            margin-top: 16px;
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    
    {% block extra_css %}
    <!-- 页面特定的CSS可以在这里添加 -->
    {% endblock %}
</head>
<body>
    <!-- 全局通知容器 -->
    <div class="notification-container" id="notificationContainer"></div>
    
    <!-- 全局加载指示器 -->
    <div class="global-loading" id="globalLoading">
        <div class="loading-spinner"></div>
        <div class="loading-text" id="loadingText">加载中...</div>
    </div>
    
    <!-- 顶部导航 - 参考Apifox风格 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10 border-b border-border">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center gap-2">
                <i class="fas fa-cubes text-primary text-2xl"></i>
                {% include 'includes/site_title.html' %}
            </div>
            
            {% if request.user.is_authenticated %}
                <div class="flex items-center gap-4">
                    <!-- 通知按钮 -->
                    <div class="dropdown relative">
                        <button class="btn btn-outline btn-sm relative dropdown-toggle cursor-pointer" id="notificationButton" style="position: relative; overflow: hidden;">
                            <i class="fas fa-bell mr-1"></i>
                            <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                        </button>
                        <div class="dropdown-menu absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-border hidden z-20" id="notificationDropdown">
                            <div class="p-3 border-b border-border">
                                <h3 class="font-medium text-text-primary">通知中心</h3>
                            </div>
                            <div class="max-h-96 overflow-y-auto">
                                <!-- 通知项示例 -->
                                <div class="dropdown-item px-4 py-3 flex gap-3 hover:bg-hover-bg cursor-pointer">
                                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                                        <i class="fas fa-bell text-primary text-sm"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-text-primary text-sm truncate">系统通知：您的测试任务已完成</p>
                                        <p class="text-text-tertiary text-xs mt-1">10分钟前</p>
                                    </div>
                                </div>
                                <div class="dropdown-item px-4 py-3 flex gap-3 hover:bg-hover-bg cursor-pointer">
                                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-success/10 flex items-center justify-center">
                                        <i class="fas fa-check-circle text-success text-sm"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-text-primary text-sm truncate">测试用例更新：接口测试用例已更新</p>
                                        <p class="text-text-tertiary text-xs mt-1">1小时前</p>
                                    </div>
                                </div>
                                <div class="dropdown-item px-4 py-3 flex gap-3 hover:bg-hover-bg cursor-pointer">
                                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center">
                                        <i class="fas fa-exclamation-triangle text-warning text-sm"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-text-primary text-sm truncate">环境状态提醒：测试环境即将过期</p>
                                        <p class="text-text-tertiary text-xs mt-1">2小时前</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-2 border-t border-border">
                                <a href="#" class="block w-full text-center px-4 py-2 text-sm text-primary hover:bg-hover-bg rounded-lg">
                                    查看全部通知
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户菜单 -->
                        <div class="dropdown relative">
                            <button class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-border hover:border-primary/50 transition-colors cursor-pointer dropdown-toggle" id="userMenuButton" style="position: relative; overflow: hidden;">
                                {% if request.user.profile.avatar %}
                                    <img src="{{ request.user.profile.avatar.url }}" alt="{{ request.user.username }}的头像" class="w-6 h-6 rounded-full border border-border">
                                {% else %}
                                    <div class="w-6 h-6 rounded-full bg-primary/10 border border-border flex items-center justify-center text-primary font-medium text-xs">
                                        {{ request.user.username|slice:':2'|upper }}
                                    </div>
                                {% endif %}
                                <span class="text-text-primary font-medium">{{ request.user.username }}</span>
                                <i class="fas fa-chevron-down text-xs text-text-tertiary"></i>
                            </button>
                            <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-border hidden z-20" id="userDropdownMenu">
                                <a href="{% url 'accounts:profile' %}" class="dropdown-item px-4 py-2 flex items-center gap-2 hover:bg-hover-bg transition-colors text-text-primary">
                                    <i class="fas fa-user text-text-tertiary"></i>
                                    <span>个人设置</span>
                                </a>
                                <a href="/admin/" class="dropdown-item px-4 py-2 flex items-center gap-2 hover:bg-hover-bg transition-colors text-text-primary">
                                    <i class="fas fa-tachometer-alt text-text-tertiary"></i>
                                    <span>管理中心</span>
                                </a>
                                <div class="border-t border-border my-1"></div>
                                <a href="{% url 'portal:logout' %}" class="dropdown-item px-4 py-2 flex items-center gap-2 text-danger hover:bg-hover-bg transition-colors">
                                    <i class="fas fa-sign-out-alt"></i>
                                    <span>退出登录</span>
                                </a>
                            </div>
                        </div>
                </div>
            {% endif %}
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        {% block content %}
        <!-- 页面主要内容将在这里插入 -->
        {% endblock %}
    </main>

    <!-- 页脚 - 参考Apifox风格 -->
    <footer class="bg-white border-t border-border py-6 mt-auto">
        <div class="container mx-auto px-4 text-center text-text-tertiary text-sm">
            <p>&copy; {% now "Y" %} API管理平台 - API开发与测试工具</p>
        </div>
    </footer>
    
    <!-- JavaScript -->
    {% load static %}
    {% block main_js %}
    <script type="module" src="{% static 'portal/js/main.js' %}"></script>
    <noscript>
      <div class="alert alert-warning">
        您的浏览器不支持JavaScript或已禁用JavaScript，某些功能可能无法正常工作。
      </div>
    </noscript>
    {% endblock %}
    
    {% block extra_js %}
    <!-- 页面特定的JavaScript可以在这里添加 -->
    {% endblock %}
</body>
</html>